import WebApp from '@twa-dev/sdk';
import { TonConnectButton, useTonWallet } from '@tonconnect/ui-react';
import { Buffer } from "buffer";
import {Address} from '@ton/core';
import {
  Avatar,
  Cell,
  List,
  Navigation,
  Placeholder, Section,
  Text,
  Title,
} from '@telegram-apps/telegram-ui';

import './TONConnectPage.css';

/**
 * @returns {JSX.Element}
 */
export function TONConnectPage() {
  const wallet = useTonWallet();
  if (!wallet) {
    return (
      <>
         <p style={{color : "white"}}>fdsafdsafdsa</p>

         <Placeholder
          className='ton-connect-page__placeholder'
          header='TON Connect'
          description={
            <>
              <Text color='#FFFFFF'>
                To display the data related to the TON Connect, it is required to connect your wallet
              </Text>
              <TonConnectButton className='ton-connect-page__button'/>
            </>
          }
        />
      </>
      
    );
  }

  const {
    account: { chain, publicKey, address },
    device: {
      appName,
      appVersion,
      maxProtocolVersion,
      platform,
      features,
    }
  } = wallet;


  const address1 = Address.parse(address)

  const newStr = address1.toString();
  const newStr2 = address1.toRawString();
  const newurlSafeStr = address1.toString({urlSafe: false})
  const newbounceableStr = address1.toString({bounceable: false})
  const newtestOnlyStr = address1.toString({testOnly: true})
  const newbounceableTestOnlyStr = address1.toString({bounceable: false, testOnly: true})



  const linexxx = "--------------xxxxxx------------"

  const odwaddress1 = Address.parse('UQAwVa3DHc4wdzyiNpehes-ScRrcBjjQaphTqTZCL8Gm_f6t');
  const odwaddress2 = Address.parse('0:3055adc31dce30773ca23697a17acf92711adc0638d06a9853a936422fc1a6fd');
  const odwaddress1Str = odwaddress1.toString();
  const odwaddress1RawStr = odwaddress2.toRawString();

  const odwaddress2Str = odwaddress2.toString();
  const odwaddress2RawStr = odwaddress2.toRawString();

  return (
    <>
    <p style={{color : "white"}}>{appName}</p>
    <p style={{color : "white"}}>{wallet.name}</p>
    <p style={{color : "white"}}>{address}</p>
     <p style={{color : "white"}}>{newStr}</p>
     <p style={{color : "white"}}>{newStr2}</p>
    <p style={{color : "white"}}>{publicKey}</p>
    <p style={{color : "white"}}>{chain}</p>
    <p style={{color : "white"}}>{platform}</p>
    <p style={{color : "white"}}>{appVersion}</p>

    <p style={{color : "white"}}>{linexxx}</p>
    <p style={{color : "white"}}>{odwaddress1Str}</p>
    <p style={{color : "white"}}>{odwaddress1RawStr}</p>
    <p style={{color : "white"}}>{odwaddress2Str}</p>
    <p style={{color : "white"}}>{odwaddress2RawStr}</p>



    {/* <p style={{color : "white"}}>{maxProtocolVersion}</p>
    <p style={{color : "white"}}>{features}</p> */}
    
    </>
    
    // <List>
    //   {'imageUrl' in wallet && (
    //     <>
    //       <Section>
    //         <Cell
    //           before={
    //             <Avatar src={wallet.imageUrl} alt='Provider logo' width={60} height={60}/>
    //           }
    //           after={<Navigation>About wallet</Navigation>}
    //           subtitle={wallet.appName}
    //           onClick={(e) => {
    //             e.preventDefault();
    //             WebApp.openLink(wallet.aboutUrl);
    //           }}
    //         >
    //           <Title level='3'>{wallet.name}</Title>
    //         </Cell>
    //       </Section>
    //       <TonConnectButton className='ton-connect-page__button-connected'/>
    //     </>
    //   )}
    // </List>
  );
}
